<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>旋转的正方体</title>
  </head>
  <style>
	  .app{
	    width: 100%;
	    height: 100vh;
	    background-color: #ffffff;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	  .cube-box48{
	    position: relative;
	    transform-style: preserve-3d;
	    animation: cube48-eff 3s linear infinite;
	  }
	  .cube48 {
	    width: 44px;
	    height: 44px;
	    transform-style: preserve-3d;
	    transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
	  }
	  .cube48 > div {
	    height: 100%;
	    position: absolute;
	    width: 100%;
	    border: 1px solid rgba(255,255,255,0.7);
	  }
	  .cube48 div:nth-of-type(1) {
	    background-color: rgba(55,175,202,0.4);
	    transform: translateZ(-22px) rotateY(180deg);
	  }
	  .cube48 div:nth-of-type(2) {
	    background-color: rgba(222,116,204,0.4);
	    transform: rotateY(-270deg) translateX(50%);
	    transform-origin: top right;
	  }
	  .cube48 div:nth-of-type(3) {
	    background-color: rgba(222,116,204,0.4);
	    transform: rotateY(270deg) translateX(-50%);
	    transform-origin: center left;
	  }
	  .cube48 div:nth-of-type(4) {
	    background-color: rgba(248,156,108,0.4);
	    transform: rotateX(90deg) translateY(-50%);
	    transform-origin: top center;
	  }
	  .cube48 div:nth-of-type(5) {
	    background-color: rgba(248,156,108,0.4);
	    transform: rotateX(-90deg) translateY(50%);
	    transform-origin: bottom center;
	  }
	  .cube48 div:nth-of-type(6) {
	    background-color: rgba(55,175,202,0.4);
	    transform: translateZ(22px);
	  }
	  @keyframes cube48-eff {
	    100% {
	      transform: rotateY(360deg);
	    }
	  }
  </style>
  <body>
    <div class="app">
      <div class="cube-box48">
        <div class="cube48">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>